<template>
	<view class="root">
		<carHeader :title="'立即预约'">
		</carHeader>
		<view class="root-top">
			<view class="sousuo">
				<text>维修方式</text>
				<view class="danxuan">
					<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
						<u-radio class="radio" :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
							:key="index" :label="item.name" :name="item.name" @change="radioChange" size="10px">
						</u-radio>
					</u-radio-group>
				</view>
			</view>



			<view class="middle">
				<view class="one">
					<text>客户信息</text>
				</view>
				<view class="two">
					<view class="input-container1">
						<view class="input-title1">车主姓名</view>
						<view class="input">
							<u-input placeholder="请输入车主姓名" v-model="form.name" shape="circle" />
						</view>

					</view>

					<view class="input-container2">
						<view class="input-title2">联系方式</view>
						<view class="input">
							<u-input placeholder="请输入联系方式" v-model="form.num" shape="circle" />
						</view>
					</view>

					<view class="input-container3">
						<view class="input-title3">预约时间</view>
						<view class="input">
							<u-input placeholder="请输入预约时间" v-model="form.time" shape="circle" />
						</view>

					</view>

					<view class="input-container4" v-show="flag">
						<view class="input-title4">取车位置</view>
						<view class="input">
							<u-input placeholder="请输入取车位置" v-model="form.address" shape="circle" />
						</view>

					</view>

				</view>
			</view>
			<view class="middle">
				<view class="one">
					<text>车辆信息</text>
				</view>
				<view class="two">
					<view class="input-container4">
						<view class="input-title4">车辆类型</view>
						<view class="select">
							<uni-data-select v-model="form.leixing" :localdata="range"
								@change="change"></uni-data-select>
						</view>
					</view>
					<view class="input-container4">
						<view class="input-title4">车牌号</view>
						<view class="input">
							<u-input placeholder="请输入车牌号" v-model="form.chepai" shape="circle" />
						</view>
					</view>

				</view>
			</view>
			<view class="middle" style="height: 600rpx">
				<view class="one">
					<text>照片</text>
				</view>
				<view class="two">
					<view class="input-container4">
						<view class="input-title4"
							style="width: 200rpx;background-color: white;color: black;text-align: left;">整车照片</view>
						<view class="select">
							<uni-file-picker limit="2" title="最多选择2张图片">
							</uni-file-picker>
						</view>
					</view>
					<view class="input-container4">
						<view class="input-title4"
							style="width: 200rpx;background-color: white;color: black; text-align: left;">维修部位照片</view>
						<view class="input">
							<uni-file-picker limit="2" title="最多选择2张图片" :value="FileList">
							</uni-file-picker>
						</view>
					</view>

				</view>
			</view>
			<view class="bottom">
				<view class="submit">
					<button style="background-color: #0662E6;">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				form: {
					name: "",
					num: "",
					time: "",
					address: "",
					leixing: "",
					chepai: "",
				},
				value: '',
				value1: 0,
				radiovalue1: '到店维修',
				radiolist1: [{
						name: '到店维修',
						disabled: false
					},
					{
						name: '上门取车',
						disabled: false
					}
				],
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				FileList: [],
			}
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
				if (n == "到店维修") {
					this.flag = false;
				} else {
					this.flag = true;
				}
			},
			change(e) {
				console.log('change', e);
			},
			change1(e) {
				console.log("e:", e);
			},
		}
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uview-ui/index.scss";
	
	.root{
		position: relative;
	}
	
	.root-top{
		position: absolute;
		top: 90rpx;
		width: 100%;
		// background-color: #55ff00;
	}

	.sousuo {
		padding-left: 5%;
		margin-right: 5%;
		width: 85%;
		height: 100rpx;
		background-color: white;
		// position: absolute;
		margin-left: 5%;
		// margin-top: 100rpx;
		border-radius: 10rpx;
		line-height: 100rpx;
		//
		display: flex;
		align-items: center;
		justify-content: space-between;

		u-radio-group {
			margin-left: 20rpx;
		}

		.radio {
			margin-left: 20rpx;
		}

	}

	.danxuan {
		// width: 400rpx;
		height: 30rpx;
		line-height: 100rpx;
		margin-right: 5%;
		justify-content: center;

		u-radio {
			margin-left: 20rpx;
		}
	}

	.middle {
		background-color: white;
		// height: 600rpx;
		width: 90%;
		margin-left: 5%;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding-bottom: 50rpx;

		.one {

			height: 100rpx;
			border-bottom: 2px solid rgba(0, 0, 0, 0.1);
			line-height: 100rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			font-size: 35rpx;
			// float: left;
		}
	}

	.input-container1,
	.input-container2,
	.input-container3,
	.input-container4 {
		height: 80rpx;
		// display: flex;
		line-height: 80rpx;
		margin-top: 20rpx;

	}

	.input-title4,
	.input-title3,
	.input-title2,
	.input-title1 {
		width: 180rpx;
		background-color: #4FA2FF;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		margin-right: 20rpx;
		margin-left: 30rpx;
		float: left;
	}

	.input {
		float: left;
		width: 420rpx;
	}

	.select {
		// height: 20rpx;
		width: 420rpx;
		// padding: 20rpx;
		border-radius: 50rpx;
		float: left;

		// border: 2px solid #8AC007;
		uni-data-select {
			border: 0;
		}
	}

	.submit {
		margin-top: 50rpx;

		button {
			width: 50%;
			color: white;
			border-radius: 50rpx;
		}
	}
</style>